<template>
  <div class="index-box">
      <div class="title">
          <span>出库列表</span>
      </div>
      <div class="index-middlebox">
          <div class="middle-item">
              <!-- <span>分拣线</span> -->
              <template>
                  <el-select placeholder="请选择" v-model="value">
                      <el-option v-for="item in rankList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </template>
          </div>
          <div class="middle-item">
              <span>商品名称</span>
              <template>
                  <el-input class="productname-input" v-model="supplierid"></el-input>
              </template>
          </div>
          <div class="middle-item">
              <span>出库日期</span>
              <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div class="middle-item" style="width:300px;">
              <template>
                  <el-button type="primary" class="search">搜索</el-button>
              </template>
          </div>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        height="500"
                        border
                        style="width: 100%">
                <el-table-column prop="idx"
                                label="序号"
                                width="100" align="center">
                </el-table-column>
                <el-table-column prop="id"
                                label="商品ID"
                                width="100" align="center"> 
                </el-table-column>
                <el-table-column prop="name"
                                label="商品名称"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop="Stocknum"
                                label="商品数量"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop="specification"
                                label="计量单位"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop="weight"
                                label="商品重量（kg）"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop='InDate'
                                label="余量"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop='Shelflife'
                                label="出库类别"
                                width="200" align="center">
                </el-table-column>
                <el-table-column prop='address'
                                label="出库日期"
                                width="200" align="center">
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        <el-button size="mini"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        },{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        },{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        },{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        },{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        },{
            idx:1,
            id:1,
            name:'苹果',
            Stocknum:200,
            specification:'300kg',
            weight:'250kg',
            InDate:'2020-10-13',
            Shelflife:'3天',
            address:'山东烟台'
        }],
        supplierid:'',
        rankList:[{
          value: 0,
          label: '一级供应商'
        },{
          value: 1,
          label: '二级供应商'
        },{
          value: 2,
          label: '三级供应商'
        },],
        ReceivingList:[{
          value: 0,
          label: '待收货'
        },{
          value: 1,
          label: '已收货'
        }],
        options: [{
          value: '选项1',
          label: '水果类'
        }, {
          value: '选项2',
          label: '蔬菜类'
        }, {
          value: '选项3',
          label: '禽蛋肉类'
        }, {
          value: '选项4',
          label: '水产类'
        }, {
          value: '选项5',
          label: '米面粮油'
        }],
        value: '',
        date:'',//日期
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      getputaway(){
          let that = this;

      }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .middle-item{
            span{
                display: inline-block;
                font-size: 14px;
                padding-right: 15px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 150px;
            }
            .search{
                width: 100px;
                margin-left:20px;
            }
            .search2{
                width: 120px;
                margin-left:20px;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
}
</style>
